<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .table .plate{}
        .table .bento{}
        #fancy{}
        .table .plate apple{}
        #fancy pickle{}
        .table apple.small{}
        .table orange.small{}
        bento .orange.small{}
        .table plate,.table bento{}
        .table,apple,plate,orange,bento{} */
    </style>
</head>
<body>
    <!-- 1.选择所有的plate -->
    <div class="table">
        <plate />
        <plate />
    </div>
    <!-- 2.选择所有的bento -->
    <div class="table">
        <bento />
        <plate />
        <bento />
    </div>
    <!-- 3.选择id为fancy的plate -->
    <div class="table">
        <plate id="fancy" />
        <plate />
        <bento />
    </div>
    <!-- 4.选择plate里面的apple -->
    <div class="table">
        <bento />
        <plate>
            <apple />
        </plate>
        <apple />
    </div>
    <!-- 5.选择id为fancy的plate中的pickle -->
    <div class="table">
        <bento>
            <orange />
        </bento>
        <plate id="fancy">
            <pickle />
        </plate>
        <plate>
            <pickle />
        </plate>
    </div>
    <!-- 6.选择small的apple -->
    <div class="table">
        <apple />
        <apple class="small" />
        <plate>
            <apple class="small" />
        </plate>
        <plate />
    </div>
   <!-- 7. 选择small的orange -->
    <div class="table">
        <apple />
        <apple class="small" />
        <bento>
            <orange class="small" />
        </bento>
        <plate>
            <orange />
        </plate>
        <plate>
            <orange class="small" />
        </plate>
    </div>
    <!-- 8.选择bento中的small orange，结构如下： -->
    <div class="table">
        <bento>
            <orange />
        </bento>
        <orange class="small" />
        <bento>
            <orange class="small" />
        </bento>
        <bento>
            <apple class="small" />
        </bento>
        <bento>
            <orange class="small" />
        </bento>
    </div>
    <!-- 9.选择所有的plate和bento，结构如下： -->
    <div class="table">
        <pickle class="small" />
        <pickle />
        <plate>
            <pickle />
        </plate>
        <bento>
            <pickle />
        </bento>
        <plate>
            <pickle />
        </plate>
        <pickle />
        <pickle class="small" />
    </div>
    <!-- 10.选择所有的物品，结构如下： -->
    <div class="table">
        <apple />
        <plate>
            <orange class="small" />
        </plate>
        <bento />
        <bento>
            <orange />
        </bento>
        <plate id="fancy" />
    </div>
</body>
</html>